<template>
  <div class="staff-list-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	   <u-sticky bgColor="#fff">
		  <div class="staff-top">
			  <u-search placeholder="输入员工姓名，手机号" v-model="keywords" :showAction="false" bgColor="#f2f2f2" @search="getList"></u-search>
		  </div>
	   </u-sticky>
	   <div class="staff-list-div">
		   <div class="staff-list-item" v-for="item in list" :key="item.pinyin">
			   <div class="item-title">{{item.pinyin}}</div>
			   <div class="item-con">
				  <div class="con-row" v-for="ee in item.data" :key="ee.userId" @click="toRow(ee)">
					   <div class="row-left" style="width:calc(100% - 80rpx)">
						   <div class="row-top">
							   {{ee.userRealname}}  <span style="padding-left:20rpx;">{{ee.mobile}}</span>
						   </div>
						   <div class="row-bottom">
							   <div><span>部门：{{ee.departmentName}}</span><span style="padding-left:40rpx;">角色：{{ee.roleName}}</span></div>
							   <div class="goods-text">负责产品：{{ee.goods}}</div>
						   </div>
					   </div>
					   
					   <div class="row-right" style="width:80rpx;text-align: right;">
						   <div style="display: inline-block;">
							    <u-icon name="arrow-right"></u-icon>
						   </div>
					   </div>			  
				  </div>
			   </div>
		   </div>
		   
	       <div v-if="list.length == 0">
			   <u-empty text="暂无数据" mode="list" icon="https://pic.moresu.com/Fs-rZPgApAIGT8szof2GUATIiF8N"></u-empty>
		   </div>
	   </div>
	   
	   
	   <view class="page-bottom-btn" :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
			<u-button text="邀请员工加入" type="primary" shape="circle" @click="show=true;"></u-button>
	   </view>
	   
	   <u-modal title="扫码后自动成为公司员工" :show="show" :closeOnClickOverlay="true" @confirm="confirm"  @close="show=false" confirmText="下载邀请码">
			<image style="width: 400rpx;height: 400rpx;" :src="codeSrc"></image>
		</u-modal>
	 
  </div>
  
</template>

<script>
  import {shareCode,getUserList} from '@/config/api.js'
  import store from '@/store';
  import {saveImg} from '@/plugins/utils.js'
  import base from '@/config/baseUrl.js';
  export default {
      data() {
          return {
  			codeSrc: '',
  			show:false,
			storeUserInfo:{},
			list:[],
			keywords:'',
			systemInfo: base.systemInfo,
          }
      },
      onLoad(options) {
  		this.storeUserInfo = store.state.userInfo;
		if (!this.storeUserInfo.userId){ // nvue页面读取不到vuex里面数据，将取缓存
		    this.storeUserInfo = uni.getStorageSync('userInfo')
		}
		this.getCode();
		this.getList()
      },
	  onShow() {
	    let self = this;
	    uni.getStorage({
	      key: 'saveStaff',
	      success: (e) => {
	        //换成接口获取
	        self.getList()
	        uni.removeStorage({
	          key: 'saveStaff'
	        })
	      }
	    })
	  },
      methods: {
		  confirm(){
			  saveImg(this.codeSrc)
		  },
		  getList(){
			  getUserList({keywords:this.keywords}).then((res)=>{
				  this.list = res
			  })
		  },
  		 getCode(){
			 shareCode({storeId:this.storeUserInfo.storeId,shareType:'addUser'}).then((res)=>{
				 this.codeSrc = res.qrCode
			 })
		 },
		 
		 //去员工编辑页
		 toRow(ee){
			 uni.navigateTo({
			   url: '/pagesUser/business/staffInfo?id='+ee.userId
			 })
		 }, 
      }
  
  }
  
</script>

<style lang="scss">
   @import '@/style/common.scss';
   .staff-list-page{
	   padding-bottom:160rpx;
	   .staff-top{
		   padding:24rpx;
	   }
	   .staff-list-div{
		   .staff-list-item{
			   padding:0 24rpx; 
			   .item-title{
				   padding-left:24rpx;
				   font-size:$m-font;
				   font-weight: bold;
				   line-height: 66rpx;
				   color: #929292;
			   }
			   .item-con{
				    background: #fff;  
					border-radius: 18rpx;
					padding:0 24rpx;
					.con-row:last-child{
						border-bottom:0px solid #DEDEDE;
					}
				   .con-row{
					   border-bottom:1px solid #DEDEDE;
					   @include flexbox(space-between,center);
					   .row-top{
						   font-size:$m-font;
						   padding:24rpx 0 12rpx 0;
					   }
					   .row-bottom{
						   font-size:$s-font;
						   color:#929292;
						   line-height: 40rpx;
						   padding-bottom:24rpx;
						   .goods-text{
							   @include textoverflow(1)
						   }
					   }
				   }
			   }
		   }
	   }
   }
 
</style>